<template>
  <div id="ltzzt"></div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick, computed } from "vue";
export default defineComponent({
  name: "Ltzzt",
});
</script>
<script setup>
import * as echarts from "echarts";

// data
const ltzztData = ref([
  {
    name: "温度",
    num: 22,
  },
  {
    name: "浊度",
    num: 35,
  },
  {
    name: "溶解氧",
    num: 30,
  },
  {
    name: "PH",
    num: 25,
  },
  {
    name: "COD",
    num: 28,
  },
  {
    name: "TOC",
    num: 38,
  },
  {
    name: "TDS",
    num: 40,
  },
  {
    name: "电导率",
    num: 15,
  },
  {
    name: "叶绿素",
    num: 35,
  },
  {
    name: "氮磷",
    num: 25,
  },
]);

// xAxis Data Comp
const axAxisDataComp = computed(() => {
  let retArr = [];
  ltzztData.value.forEach((item) => {
    retArr.push(item.name);
  });
  return retArr;
});

// zBar Data Comp
const zBarDataComp = computed(() => {
  let retArr = [];
  ltzztData.value.forEach((item) => {
    retArr.push(item.num);
  });
  console.log(retArr);
  return retArr;
});

// zBar MarkPoint Comp
const zBarMarkPointDataComp = computed(() => {
  let retArr = [];
  ltzztData.value.forEach((item, index) => {
    let obj = {};
    obj.symbol =
      "image://https://wangweilun-1306462865.cos.ap-nanjing.myqcloud.com/buka_img/Vector@2x (1).png";
    obj.xAxis = index;
    obj.yAxis = item.num - 0.4;
    retArr.push(obj);
  });
  console.log(retArr);
  return retArr;
});

// Center Border Line Data Comp
const CenterBorderLineDataComp = computed(() => {
  let retArr = [];
  ltzztData.value.forEach((item, index) => {
    let nArr = [];
    let objB = {};
    let objT = {};
    objB.coord = [index, 0];
    objT.coord = [index, item.num - 1];
    nArr.push(objB);
    nArr.push(objT);
    retArr.push(nArr);
  });
  return retArr;
});

var option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  grid: {
    left: "0%",
    right: "4%",
    bottom: "0%",
    top: "10px",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: axAxisDataComp.value,
    axisLabel: {
      color: "#E6F7FF",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 2555, 0.1)",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#E6F7FF",
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
      },
    },
  },
  series: [
    {
      itemStyle: {
        normal: {
          // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
          color: {
            type: "linear",
            x: 1,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 147, 221, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 88, 255, 0.2)",
              },
            ],
          },
        },
      },
      data: zBarDataComp.value,
      type: "bar",
      barWidth: 20,
      z: 2,
      name: "主柱",
      markPoint: {
        emphasis: {
          disabled: true,
        },
        data: zBarMarkPointDataComp.value,
        symbolSize: [25, 8],
        label: {
          show: false,
        },
      },
    },
    {
      z: 0,
      name: "立体中边线",
      type: "line",
      markLine: {
        lineStyle: {
          type: "solid",
        },
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          lineWidth: 4,
          //盒须图样式。
          color: {
            type: "linear",
            x: 1,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(194, 230, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 68, 170, 0.3)",
              },
            ],
          },
        },
        name: "cc",
        yAxisIndex: 0,
        symbol: "none", //去掉箭头
        data: CenterBorderLineDataComp.value,
      },
    },
    {
      z: 1,
      name: "产业结构",
      // 柱子底部
      type: "pictorialBar",
      data: zBarDataComp.value,
      symbol: "diamond",
      symbolOffset: [0, 4],
      symbolSize: [20, 8],
      itemStyle: {
        normal: {
          color: "rgba(10, 49, 108, 0.6) ",
        },
      },
      tooltip: {
        show: false,
      },
    },
    {
      z: 3,
      name: "产业结构",
      type: "pictorialBar",
      // 柱子顶部
      symbolPosition: "end",
      data: zBarDataComp.value,
      symbol: "diamond",
      symbolOffset: [0, -11],
      symbolRotate: 90,
      symbolSize: [10, 19],
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "red",
          color: {
            colorStops: [
              {
                offset: 1,
                color: "rgba(0, 114, 221, 1)",
              },
              {
                offset: 0,
                color: "rgba(129, 228, 255, 1)",
              },
            ],
          },
        },
      },
      tooltip: {
        show: false,
      },
    },
  ],
};

nextTick(() => {
  const dom = document.getElementById("ltzzt");
  var ltzztCharts = echarts.init(dom);
  ltzztCharts.setOption(option);
});
</script>

<style lang="scss" scoped>
#ltzzt {
  width: 30vw;
  height: 30vh;
  background: black;
}
</style>
